<template>
<div class="main_spac1 maincl">
	<div class="main_white padding10">
		<div class="mainor_form">
		<el-form
				:inline="true"
				:model="form"
				class="demo-form-inline"
				ref="searchForm"
			>
				<el-form-item label="名称">
					<el-input
						v-model.trim="form.title"
						placeholder="名称"
						clearable
					></el-input>
				</el-form-item>

				<el-form-item label="来源">
					<el-select v-model="form.site_id" style="width:188px;"  placeholder="请选择" clearable>
						<el-option
						v-for="(val,key,index) in site_list"
						:key="index"
						:value="key"
						:label="val"
						>
						</el-option>
					</el-select>
				</el-form-item>

				<el-form-item label="采集时间日期">
					<el-date-picker
					v-model="form.time"
					value-format="yyyy-MM-dd"
					type="daterange"
					range-separator="至"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
					>
					</el-date-picker>
				</el-form-item>
				<div class="clearfix"></div>
				<el-form-item class="marginTop10">
					<el-button
						class="reset marginLeft10"
						type="primary"
						@click="reset()"
						>重置</el-button
					>
					<el-button
						type="primary"
						@click="searchAction"
						:loading="listLoading"
						>搜索</el-button
					>
				</el-form-item>
			</el-form>
		</div>

		<div class="main_table" style="min-height: 590px">
		<el-table
			ref="multipleTable"
			v-loading="listLoading"
			:data="list"
			element-loading-text="加载中"
			fit
			border
			highlight-current-row
		>

			<el-table-column
				label="名称"
				prop="title"
				:show-overflow-tooltip="true"
			>
            <template slot-scope="scope">
               <a :href="scope.row.url" target="_blank" class="alink">{{scope.row.title}}</a>
            </template>
			</el-table-column>

			<el-table-column
				label="来源"
				prop="site_name"
            width="300"
				:show-overflow-tooltip="true"
			/>
			<el-table-column
				label="采集时间"
				prop="created_at"
            width="200"
				:show-overflow-tooltip="true"
			>
				<template slot-scope="scope">{{parseTime(scope.row.created_at, "{y}-{m}-{d}")}}</template>
			</el-table-column>
         <el-table-column prop="status" label="上线/下线" width="180">
            <template slot-scope="scope">
               <el-switch
                  v-model="scope.row.status"
                  active-color="#03a98e"
                  :active-value="1"
                  :inactive-value="0"
                  @change="changeStatus($event, scope.row.id,scope.$index)"
               >
               </el-switch>
            </template>
         </el-table-column>
			<el-table-column fixed="right" label="操作" width="100" class-name="rightbtn">
				<template slot-scope="scope">
					<el-button
						@click="delAction(scope.row.id)"
						type="text"
						size="mini"
						style="color:#fa3534"
						class="handle_btn"
					>删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		</div>



		<div class="main_page boxdq">
			<div></div>
			<!-- 分页 -->
			<div class="main_page_r">
				<el-pagination
					:current-page="current.page"
					:page-sizes="[20, 30, 50, 100]"
					:page-size="limit"
					layout="total, sizes, prev, pager, next, jumper"
					:total="totalCount"
					background
					@size-change="changeLimit"
					@current-change="changePage"
				/>
			</div>
		</div>
	</div>  


</div>
</template>

<script>
import { tenderList,changeTender,deleteTender} from "@/api/document/document";
import { parseTime } from "@/utils/index";
export default {
data() {
	return {
		// 时间
		parseTime,
		// 分页
		current: {
         page: 1,
         size: 20,
		},
		limit: 20,
		totalCount: 1,
		form: {},// 搜索
		list: [],// 列表数据
      site_list:{},  //网站列表
		listLoading: false,
		// 全选
		selectArr: [],
		
	};
},
mounted() {
	this.getData();
},
methods: {
	// 获取列表
	getData() {
		this.listLoading = true;
      let data = {page:this.current.page,size:this.current.size};
		let search = this.list_form();
		Object.assign(data,search);
		tenderList(data).then((res) => {
			if(res.errcode==0){
				this.listLoading = false;
				this.list = res.data.list;
				this.totalCount = res.data.count;
            this.site_list = res.data.site_list;
			}else{
				this.$message.error(res.errmsg)
			}
		}).catch((err)=>{
      })
	},
   //上下线
   changeStatus(status,id,index){
      let data = {id,status};
      changeTender(data).then((res)=>{
         if(res.errcode==0){
            this.$message.success('修改成功')
         }else{
            this.list[index].status = status==1? 0:1;
            this.$message.error(res.errmsg);
         }
      })
   },
   delAction(id){
      this.$confirm('确定删除？').then(_ => {
           deleteTender({id}).then((res)=>{
              if(res.errcode==0){
                 this.$message.success('删除成功');
                 this.getData()
              }else{
                 this.$message.error(res.errmsg);
              }
              
           }) 
      })
   },
	// 搜索
	searchAction() {
		this.current.page = 1;
		this.getData();
	},
	// 分页
	changeLimit(pageSize) {
		this.current.per_page = pageSize;
		this.getData();
	},
	changePage(page) {
		this.current.page = page;
		this.getData();
	},
	//处理搜索表单
	list_form() {
		let form = {};
		for (let i in this.form) {
			if (this.form[i] != "") {
				form[i] = this.form[i];
			}
		}
		if(form.time){
			form.start_time = form.time[0];
			form.end_time = form.time[1];
			delete form.time;
		}
		return form;
	},
	reset() {
		this.form = {};
		this.getData();
	},
	resetForm(formName) {
		this.$refs[formName].resetFields();
	},
},
};
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";
.maincl {
   .alink{
      color:#409EFF;
      &:hover{
         color:#03A98E;
      }
      // &:visited{
      //    color:#771caa;
      // }
   }
.el-select {
	width: 114px;
}
.more {
	margin-left: 50px;
}
.handle_btn {
	padding: 0;
	border: 0;
	+.handle_btn{
		margin-left:20px;
	}
}
.edit_dialog {
	.address {
		max-width: 350px;
	}
}
.demo-form-inline{
   .el-form-item{
      margin-right:20px;
   }
}
.mainor_form form {
	// width: calc(100% - 180px);
	width: 100%;
}

.main_table /deep/.el-table--small td {
	padding: 10px 0;
}
.main_table /deep/.el-table--small th {
	padding: 10px 0;
}
.zero_dialog{
	/deep/.el-dialog__body{
		padding-top:0;
	}
	/deep/.el-alert{
		margin-bottom:20px;
	}
}

/deep/.el-table {
	tr {
		&:hover {
		background: none !important;
		}
		&.hover-row > td {
		background: none !important;
		}
		.current-row > td {
		background: none !important;
		}
	}
}
/deep/.el-table .el-table__body tr:hover {
	background: #fff !important;
}
/deep/.el-table .el-table__body tr:hover > td {
	background: #fff !important;
}
/deep/.el-table tr.expanded + tr {
	background: #fafafa !important;
}
/deep/.el-table tr.expanded + tr > td {
	background: #fafafa !important;
}
/deep/.el-table tr.expanded + tr .mainex_ta {
	background: #fafafa !important;
}
/deep/.el-table tr.expanded + tr .mainex_ta th,
/deep/.el-table tr.expanded + tr .mainex_ta tr {
	background: #fafafa !important;
}
/deep/.el-table tr.expanded + tr:hover {
	background: #fafafa !important;
}
/deep/.el-table tr.expanded + tr:hover > td {
	background: #fafafa !important;
}
/deep/.el-table tr.expanded + tr .el-table tr:hover {
	background: #fafafa !important;
}
/deep/.el-table tr.expanded + tr .el-table tr:hover > td {
	background: #fafafa !important;
}
}
.finalDialog{
	.info{
		margin-bottom:20px;
		overflow: hidden;
		>div{
			width:50%;
			float: left;
			.row{
				margin-bottom:10px;
				.label{
					color:#999;
					width:100px;
					text-align: right;
					display: inline-block;
				}
			}
		}
	}
}
.el-table{
	.cell{
		display: flex;
		flex-wrap: wrap;
	}
}
</style>
